// base
import Taro, { Component } from '@tarojs/taro'
// less
import './index.less'
import { doUpload } from '../../../util/pagemethods/upload'
import { View, Text, Map, CoverView, CoverImage, Image, Input, ScrollView, Textarea } from '@tarojs/components'
import { dealImgUrl, avater } from '../../../configuration/staticimg'
import { showModal, showToast } from '../../../crossplatform/apiservice/toast'
import { navigateTo, navigateBack } from '../../../crossplatform/apiservice/navigate'
import { reportPost } from '../../../service/report'
import pagejumplist from '../../../configuration/pagejumplist.json'

class CompanyReport extends Component {
  constructor(props) {
    super(props)
    this.state = {
      companyName: '',
      jobname: '',
      reason: '',
      contact: '',
      reportType: undefined,
      dataArr: [],
      list: ['电话虚假', '非法收费', '职位虚假', '涉黄违法', '招聘刷单', '冒充直招', '招生培训信息 (非招聘)', '其他']
    }
  }
  componentWillMount() {
    // onLoad
  }
  componentDidMount() {
    // onready
    const params = this.$router && this.$router.params
    if (params) {
      this.setState({
        companyName: params.companyName,
        jobname: params.jobname
      })
    }
  }

  componentDidShow() {
    // onshow
  }

  componentDidHide() {
    // onhide
  }

  componentWillUnmount() {
    // onUnload
  }
  onReportType(index) {
    this.setState({
      reportType: index
    })
  }
  cause = (e) => {
    this.setState({
      reason: e.detail.value
    })
  }
  contact = (e) => {
    this.setState({
      contact: e.detail.value
    })
  }
  onTap = () => {
    const { dataArr = [] } = this.state
    if (dataArr.length >= 6) {
      showToast({
        title: '凭证最多添加6张哦！'
      })
    } else {
      doUpload('avatar').then(res => {
        let url = res.url
        if (url) {
          this.setState({
            dataArr: [...dataArr, url]
          })
        }
      })
    }
  }
  inform = () => {
    let { reportType, dataArr, reason, contact, list } = this.state
    const data = this.$router && this.$router.params
    if (dataArr.length > 0 && reportType !== undefined) {
      if (reportType === 7 && reason.length === 0) {
        showToast({
          title: '请填写举报原因'
        })
        return
      }
      let params = { postId: data.id, reason: reportType === 7 ? reason : list[reportType], img: dataArr.join(','), contact, companyId: data.companyId }
      reportPost({ params }).then((res) => {
        if (res.data.code == 200) {
          showToast({
            title: '举报成功'
          })
          setTimeout(() => {
            navigateBack()
          }, 500)
        }
      })
    } else {
      showToast({
        title: '请把举报信息填写完整'
      })
    }
  }
  onClick = (index) => {
    let inglist = this.state.dataArr.filter((item, i) => i !== index)
    this.setState({
      dataArr: inglist
    })
  }
  render() {
    let { list, companyName, jobname, reportType, reason, dataArr, contact } = this.state
    console.log(dataArr.length)
    return (
      <View className='scrollView'>
        <View className="title">岗位举报</View>
        <View className="company">
          <View className="companyView">
            <Text>
              公司:
              </Text>
            <Text className='companyViewText'>{companyName}</Text>
          </View>
          <View className="companyView">
            <Text>岗位:</Text>
            <Text className='companyViewText'>{jobname}</Text>
          </View>
        </View>
        <Text className="h2">请选择举报类型</Text>
        <View className="buttonList">
          {
            list.map((item, index) => {
              return <View className={reportType === index ? 'button green' : 'button'} onClick={this.onReportType.bind(this, index)} key={index} >
                {item}
              </View>
            })
          }
        </View>
        {
          reportType === 7 && <View className='reason'>
            <Textarea maxlength={120} onInput={this.cause} placeholder='请详细说明信息，有助于我们更快速地核实您的举报' />
            <View className='reasonSize'>{reason.length}/120</View>
          </View>
        }
        <View>
          <Text className="h2">
            凭证 (最多可上传6张）
          </Text>
          <View className='imgList'>
            {
              dataArr.map((item, index) => {
                return <View className="imgView" key={index}>
                  <Image
                    className="itemimg"
                    src={dealImgUrl(item)}
                  />
                  <Image onClick={this.onClick.bind(this, index)} className='delImg' src='https://imagesize.hrwork.com/sp/files/661a184f-c34b-448d-bac9-c02972b1a48d.png' />
                </View>
              })
            }
            {dataArr.length < 6 && <View className="upload-btn" onTap={this.onTap}>
              <Image
                className="iconimg"
                src="https://imagesize.hrwork.com/sp/files/da8795ff-522b-4c3a-ac2d-08b15db85716.png"
              />
            </View>}
          </View>

        </View>
        <View>
          <Text className="h2">
            联系方式 (选填)
          </Text>
          <Input
            onInput={this.contact}
            type='number'
            placeholder='留下您的联系方式，方便为您答疑解惑'
            value={contact || ''}
            maxLength='11'
            className='mobile' />
        </View>
        <View onClick={this.inform} className={'inform'}>
          举报
        </View>
      </View>
    )
  }
}
// cc5c4
export default CompanyReport
